<template>
  <div id="box">
    <h1>大屏</h1>
    <div class="item1">333</div>
  </div>
</template>

<script>
function initScale(
  defaultBox = {
    width: 1920,
    height: 1080,
  }
) {
  let container = document.getElementById("box");
  console.log("container", container);
  function scale() {
    let { width, height } = defaultBox;
    let main_Route = document.getElementById("main_juan");

    let deviceWidth;
    let deviceHeight;
    if (main_Route) {
      console.log("11");
      deviceWidth = main_Route.clientWidth;
      deviceHeight = main_Route.clientHeight;
      console.log("deviceWidth", deviceWidth);
      console.log("deviceHeight", deviceHeight);
    } else {
      console.log("22");
      deviceWidth = innerWidth;
      deviceHeight = innerHeight;
    }

    let scaleX = deviceWidth / width;
    let scaleY = deviceHeight / height;
    let scale = Math.min(scaleX, scaleY);
    let moveX = (deviceWidth - width * scale) / 2;
    let moveY = (deviceHeight - height * scale) / 2;
    container.style.transformOrigin = "top left";
    if (main_Route) {
      container.style.top = "50%";
      container.style.left = "50%";
      container.style.transform = `scale(${scale}) translate(-50%,-50%)`;
    } else {
      container.style.top = "0";
      container.style.left = "0";
      container.style.transform = `translate(${moveX}px,${moveY}px) scale(${scale})`;
    }
  }
  function debounce(fn, delay = 300) {
    let timer = null;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn();
      }, delay);
    }.bind(this);
  }
  scale();
  window.addEventListener("resize", debounce(scale));
}
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {
    initScale();
  },
};
</script>

<style scoped lang="scss">
#box {
  background: linear-gradient(90deg, #e988e1, #2c96dd);
  width: 1920px;
  height: 1080px;
  position: absolute;
  transition: all 1s ease;

  .item1 {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    font-size: 24px;
  }
}
</style>
